<template>
  <div>
    <van-search
      v-model="searchShopName"
      placeholder="请输入搜索商铺"
      show-action
      @search="onSearch"
      @cancel="onCancel"
      @clear="onClaer"
      class="search-top"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>

    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="true"
      :offset="100"
      @load="loadMore"
      finished-text="没有更多了"
      class="shop-list"
    >
      <van-cell
        class="shop-item"
        is-link
        :to="{ path: 'shopInfo',name:'shopInfo', query: item}"
        v-for="(item, index) in items"
        :key="index"
      >
        <div class="shopName">
          <van-icon name="shop2" />
          &nbsp{{ item.shopName }}
        </div>
        <div>{{ item.managerName }}，{{ item.managerMobile }}</div>
        <div class="addr">{{ item.addr }}</div>
      </van-cell>
    </van-list>

    <is-empty v-if="isEmpty">暂无设备，请添加设备</is-empty>

    <transition name="fade">
      <van-icon name="back-top" class="backTop" @click.native="backTop" v-show="showArrow" />
    </transition>
  </div>
</template>

<script>
import { getShopList } from "./../../api/shop";
import shopInfoVue from "./shopInfo.vue";
// import loadMore from "@/mixin/list-load-more";
import scrollFixed from "@/mixin/scroll-fixed";
import IsEmpty from "@/components/is-empty/";
import { throttle } from "@/libs/util";
export default {
  mixins: [scrollFixed],
  data() {
    return {
      searchShopName: "",
      showArrow: false,
        pages: {
        perPage: 10,
        currPage: 1,
        pageCount: 1
      },
      items: [],
      loading: false,
      finished: false,
      isEmpty: false
    };
  },
  created() {
    this.scrollShowArrow = throttle(this.scrollShowArrow, 100);
  },
  activated() {
    this.eventListen(true);
  },

  deactivated() {
    this.eventListen(false);
  },

  mounted() {},
  methods: {
    onSearch() {
      this.resetInit();
    },
    onCancel() {
      this.resetInit();
    },
    onClaer() {
      this.resetInit();
    },
    resetInit() {
     this.finished = true;
      let me = this;
      setTimeout(function() {
        me.items = [];
        me.pages = {
          perPage: 10,
          currPage: 1,
          pageCount: 1
        };
        me.finished = false;
        me.loading = false;
      }, 100);
    },
    loadMore() {
      let params = {
        shopName: this.searchShopName,
        current: this.pages.currPage,
        size: this.pages.perPage
      };
      getShopList(params).then(res => {
         if(res.data.total==0){
           this.loading = false;
           this.finished = true;
           return
        }
        const items = res.data.records;
        this.pages.pageCount = Math.ceil(res.data.total / this.pages.perPage);
        this.items.push(...items);
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.pages.currPage == this.pages.pageCount) {
          this.finished = true;
        } else {
          this.pages.currPage += 1;
        }
      });
    },
    eventListen(isBind = true) {
      if (isBind) {
        this.$el.addEventListener("scroll", this.scrollShowArrow);
      } else {
        this.$el.removeEventListener("scroll", this.scrollShowArrow);
      }
    },
    scrollShowArrow() {
      this.showArrow = this.$el.scrollTop > 120;
    },
    backTop() {
      this.$el.scrollTop = 0;
    }
  }
};
</script>

<style lang="scss">
.mobile-nav {
  &__item {
    margin-bottom: 20px;
  }
  &::after {
    display: none;
  }
  .van-collapse-item__content {
    padding: 0;
  }
  .van-collapse-item__title {
    font-size: 16px;
    line-height: 36px;
    align-items: center;
  }
}
.search-top {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 2020;
}
.shop-list {
  margin-top: 50px;
}
</style>